<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>{{name}}</h2>
    <h2>{{age}}</h2>
</div>
<script type="text/javascript">
    // 1.先了解Object.defineProperty方法
    let person = {
        name: 'wjz',
        sex: "男"
    }
    let age = 23;
    Object.defineProperty(person, 'age', {
        // value: 23, // 这种方法添加的属性是无法被枚举的，属性值无法修改，属性无法被删除
        // enumerable: true, // 控制属性是否可以被枚举
        // writable: true, // 控制属性值可以被修改
        // configurable: true, // 控制属性是否可以被删除

        // 当有人读取person对象的age属性时，getter就会调用，且返回值就是age的值
        get() {
            console.log("有人读取了age的值")
            return age;
        },
        // 当有人修改person对象的age属性时，setter就会调用，且收到修改的值
        set(val) {
            console.log("有人修改了age的值，新值：", val)
            age = val;
        }
    })
    console.log(Object.keys(person)) // 遍历对象的属性
    console.log(person)

    // 2.什么叫数据代理：通过一个对象代理另一个对象中属性的操作（读/写）
    let obj = {x: 100};
    let proxy = {y: 200};
    Object.defineProperty(proxy, 'x', {
        get() {
            return obj.x;
        },
        set(v) {
            obj.x = v;
        }
    })

    // 3.vue中，我们自己编写的data被存储在vm中的_data中，vm使用getter、setter方法代理_data
    let data = {
        name: "wjz",
        age: 23
    }
    let vm = new Vue({
        el: '#app',
        data: data
    })
    console.log(vm._data === data)
</script>
</body>
</html>